<script>
import located from "@/assets/img/map/located.png"
import Equip from "@/api/equip";
export default {
	props: {
		equipIds: {
			type: String,
			default: ""
		},
		centerProps: {
			type: Object | undefined,
			default: undefined
		}
	},
	data() {
		return {
			center: this.centerProps,
			userInfos: [],
			userInfo: undefined,
			markIcon: {
				url: located,
				size: { width: 52, height: 38 },
				opts: { anchor: { width: 19, height: 38 } },
			},
			show: false,
		}
	},
	watch: {
		centerProps(val) {
			this.center =  {lng: val.lng, lat: val.lat}
		},
	},
	mounted() {
		if (this.equipIds) {
			this.fetchListLocaleActualUserInfo()
		}
	},
	methods: {
		/**
		 * 获取用户地图信息
		 */
		fetchListLocaleActualUserInfo() {
			Equip.ListLocaleActualUserInfo({equipIds: this.equipIds}).then(res => {
				if (res.data.length > 0) {
					const data = res.data.filter(item =>  item.currentInfo.latitude && item.currentInfo.longitude)
					this.userInfos = res.data
					this.center = { lng: data[0].currentInfo.longitude, lat: data[0].currentInfo.latitude}
					this.$emit("userInfos", res.data, data[0].currentInfo.equipId);
				}
			})
		},
		/**
		 * 打开地图信息弹窗
		 */
		handleOpenMapWindow() {
			this.show = true
		},
		/**
		 * 关闭地图信息弹窗
		 */
		handleMapWindowClose () {
			this.show = false
		},
		/**
		 * 打开标签
		 * @param info
		 */
		handleOpenLabel(info) {
			this.show = true
			this.userInfo = {...info, sex: info.sex ? info.sex === 1 ? '男' : '女' : ''}
		}
	}
}
</script>

<template>
	<baidu-map class="bm-view" :center="center" :zoom="15">
		<bm-panorama />
		<bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
		<bm-marker @click="handleOpenLabel(item)" :icon="markIcon" v-for="(item, index) in userInfos" :key="index" :position="{ lng: item.currentInfo.longitude, lat: item.currentInfo.latitude}" />
		<bm-label @click="handleOpenLabel(item)" v-for="(item, index) in userInfos" :key="index"  :content="item.name || item.equipName" :position="{ lng: item.currentInfo.longitude, lat: item.currentInfo.latitude}" :labelStyle="{color: '#fff', fontSize : '14px', padding: '2px 10px', borderRadius: '10px', background: '#49b07a',border: 'none'}" title="点击查看更多信息"/>
		<bm-info-window v-if="userInfo" :position="{ lng: userInfo.currentInfo.longitude, lat: userInfo.currentInfo.latitude}" :title="userInfo.name || userInfo.equipName" :show="show" @close="handleMapWindowClose" @open="handleOpenMapWindow">
			<div class="userInfo">
				<div><span>姓名：</span>{{ userInfo.name || '-' }}</div>
				<div><span>年龄：</span>{{ userInfo.age || '-' }}</div>
				<div><span>性别：</span>{{ userInfo.sex || '-' }}</div>
				<div><span>联系方式：</span>{{ userInfo.phone || '-' }}</div>
				<div><span>当前定位地址：</span>{{ userInfo.currentInfo.address || '-' }}</div>
				<div v-if="userInfo.oneName && userInfo.onePhone"><span>场所紧急联系人一：</span>{ userInfos.oneName }} - {{ userInfo.onePhone }}</div>
				<div v-if="userInfo.twoName && userInfo.twoPhone"><span>场所紧急联系人二：</span>{ userInfos.twoName }} - {{ userInfo.twoPhone }}</div>
				<div v-if="userInfo.threeName && userInfo.threePhone"><span>场所紧急联系人三：</span>{{ userInfos.threeName }} - {{ userInfo.threePhone }}</div>
			</div>
			<button @click="handleMapWindowClose">关闭</button>
		</bm-info-window>
	</baidu-map>
</template>

<style scoped lang="scss">
.bm-view {
	z-index: 1;
	width: 100%;
	height: 650px;
}
.userInfo {
	margin-bottom: 10px;
}
</style>
